<template>
  <div class='question-container'>
   <el-card > 
         <!-- 筛选 -->
      <el-form  label-width="80px" size="small" >
        <el-row>
      <el-col :span="6">
        <el-form-item  label="关键字">
          <el-input style="200px" v-model="form.keyword" placeholder="根据编号搜索"></el-input>
         </el-form-item>
      </el-col>
         <el-col :span="6" :offset="12">
          <el-form-item style="text-align:right">
          <el-button @click="clear()">清除 </el-button>
          <el-button @click="filter()" type="primary" >搜索</el-button>
         </el-form-item>
         </el-col>
        </el-row>
      </el-form>
         <!-- 数据记录 -->
         <el-alert style="margin-bottom:15px"     
         :title="`数据一共 ${total} 条`"
          type="info"
          :closable='false'
          show-icon>
        </el-alert>
         <!-- 表格列表 -->
        <el-table  
          :data="tableData"
          style="margin-bottom:20px">
          <el-table-column
            prop="id"
            label="编号"
            width="220px">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="80px">
            <template slot-scope="scope">
              {{questionType.find(item=>item.value===+scope.row.questionType).label}}
            </template>
          </el-table-column>
          <el-table-column
            prop="questionIDs"
            label="题目编号"
            width="220px">
            <template slot-scope="scope">
             <div v-for="item in scope.row.questionIDs" :key="item.number">
               <a href="#" @click="IdentiFier(item)" style="color:#09f">{{item.number}}</a>
             </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="180px">
            <template slot-scope="scope">
             {{scope.row.addTime|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)">
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人">
          </el-table-column>
          <el-table-column  label="操作" width="80px">
              <template slot-scope="scope">
                <el-button type="danger" size="small" plain icon="el-icon-delete" circle @click="delQuestion(scope.row)" ></el-button>
              </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
        <el-pagination  style="text-align:right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[10, 20, 40, 50]"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background>
        </el-pagination>

        <!-- 预览 -->
        <questions-preview :data="questionInfo" :isShowDialog="isShowDialog" @closeDialog="closeDialog"/>
   </el-card>
  </div>
</template>

<script>

import {randoms as questionList,removeRandoms as delremoveRandoms } from '@/api/hmmm/questions'
import {questionType,difficulty} from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'
export default {
  components:{
    QuestionsPreview
  },
  // props:[],
  data(){
    return{
      form:{
        page:1,
        pagesize:20,
        keyword:''
      },
      // 组题列表    
     tableData: [],
     total:0,
     questionType,
     difficulty,
     questionInfo:{},
     isShowDialog:false
    }
  },
  created(){
    this.getQuestions()
  },
  methods:{
      // 渲染组题数据
      async getQuestions(){
          const {data} =await questionList(this.form)
          this.total=data.counts
          this.tableData=data.items
          console.log(data);
        },
      // 删除操作
      async delQuestion(id){
        //  console.log(id);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
            ).then(()=>{
            delremoveRandoms(id)
            this.$message.success('删除成功')  
            this.getQuestions()    
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
          })
        },
        // 清除
        clear(){
        this.form.keyword=''
        },
        // 搜索
        filter(){
         this.form.page=1
         this.getQuestions()
        },
        // 题目预览弹框
        IdentiFier(questionInfo){
         this.questionInfo=questionInfo
         this.isShowDialog = true
        },
        // 监听每页多少条
        handleSizeChange(newSize) {
          this.form.page=1
          this.form.pagesize=newSize
          this.getQuestions()
        },
        // 监听当前页码
        handleCurrentChange(newPage) {
        this.form.page=newPage
        this.getQuestions()
        },
         // 弹窗 
        closeDialog() {
          this.isShowDialog = false
        },
  } 
}
</script>


<style scoped lang='less'>
.question-container{
  padding: 0 10px ;
  margin: 10px 0;
}
</style>
